<template>
  <div class="outmain ba_f">
    <!--        <div class="shuju_title mar_b20">-->
    <!--            <div class="shuju_title_text">-->
    <!--                <span>应用中的页面</span>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="flex pad_20">-->
    <!--            <div class="wid25 flex flex-y-top disMode mar_r20">-->
    <!--                <div class="pad_l_20"><img class="zximg bor_rad5" src="../../assets/img/style/sy.png"/></div>-->
    <!--                <div class="lh28 mar_l20">-->
    <!--                    <div class="fon_14">装修首页</div>-->
    <!--                    <div class="wei">首页名称</div>-->
    <!--                    <div class="fon_12 color_9">修改时间：2020-8-29</div>-->
    <!--                    <div class="mar_t20 flex">-->
    <!--                        <el-button size="medium" @click="handleEditClick">编辑</el-button>-->
    <!--                        <el-popover trigger="hover" placement="top">-->
    <!--                            <div class="t_c wid">-->
    <!--                                <div class="codeImg flex-center">-->
    <!--                                    <img class="wid bor_rad5 mar_l20" src="../../assets/img/good/ceshi.jpg"/>-->
    <!--                                </div>-->
    <!--                                <div class="mar_t10 fon_12">扫码二维码预览</div>-->
    <!--                            </div>-->
    <!--                            <div slot="reference" class="name-wrapper">-->
    <!--                                <el-button slot="reference" size="medium" class="mar_l20">预览</el-button>-->
    <!--                            </div>-->
    <!--                        </el-popover>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="wid25 flex flex-y-top disMode mar_r20">-->
    <!--                <div class="pad_l_20"><img class="zximg bor_rad5" src="../../assets/img/style/gz.png"/></div>-->
    <!--                <div class="lh28 mar_l20">-->
    <!--                    <div class="fon_14">个人中心</div>-->
    <!--                    <div class="wei">个人中心</div>-->
    <!--                    <div class="fon_12 color_9">修改时间：2020-8-29</div>-->
    <!--                    <div class="mar_t20 flex">-->
    <!--                        <el-button size="medium" @click="handleEditClick">编辑</el-button>-->
    <!--                        <el-popover trigger="hover" placement="top">-->
    <!--                            <div class="t_c wid">-->
    <!--                                <div class="codeImg flex-center"><img class="wid bor_rad5 mar_l20"-->
    <!--                                                                      src="../../assets/img/good/ceshi.jpg"/></div>-->
    <!--                                <div class="mar_t10 fon_12">扫码二维码预览</div>-->
    <!--                            </div>-->
    <!--                            <div slot="reference" class="name-wrapper">-->
    <!--                                <el-button slot="reference" size="medium" class="mar_l20">预览</el-button>-->
    <!--                            </div>-->
    <!--                        </el-popover>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="wid25 flex flex-y-top disMode">-->
    <!--                <div class="pad_l_20"><img class="zximg bor_rad5" src="../../assets/img/style/zy.png"/></div>-->
    <!--                <div class="lh28 mar_l20">-->
    <!--                    <div class="fon_14">自定义页面</div>-->
    <!--                    <div class="wei">自定义页面名称</div>-->
    <!--                    <div class="fon_12 color_9">修改时间：2020-8-29</div>-->
    <!--                    <div class="mar_t20 flex">-->
    <!--                        <el-button size="medium">编辑</el-button>-->
    <!--                        <el-popover trigger="hover" placement="top">-->
    <!--                            <div class="t_c wid">-->
    <!--                                <div class="codeImg flex-center"><img class="wid bor_rad5 mar_l20"-->
    <!--                                                                      src="../../assets/img/good/ceshi.jpg"/></div>-->
    <!--                                <div class="mar_t10 fon_12">扫码二维码预览</div>-->
    <!--                            </div>-->
    <!--                            <div slot="reference" class="name-wrapper">-->
    <!--                                <el-button slot="reference" size="medium" class="mar_l20">预览</el-button>-->
    <!--                            </div>-->
    <!--                        </el-popover>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="wid25 flex"></div>-->
    <!--        </div>-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="装修列表" name="1"></el-tab-pane>
<!--        <el-tab-pane label="模板商城" name="2"></el-tab-pane>-->
    </el-tabs>
    <div class="flex-bet mar_t20 pad_lr_20">
      <div>
        <el-button type="primary" @click="handleEdit" size="medium">添加页面</el-button>
        <!--                <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">-->
        <!--                    <el-form-item label="页面名称">-->
        <!--                        <el-input v-model="formInline.name" size="medium" placeholder="页面名称"></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="应用状态">-->
        <!--                        <el-select v-model="formInline.display" placeholder="请选择">-->
        <!--                            <el-option-->
        <!--                                    v-for="item in options"-->
        <!--                                    :key="item.value"-->
        <!--                                    :label="item.label"-->
        <!--                                    :value="item.value">-->
        <!--                            </el-option>-->
        <!--                        </el-select>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item>-->
        <!--                        <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>-->
        <!--                    </el-form-item>-->
        <!--                </el-form>-->
      </div>
      <div></div>
    </div>
    <div class="tabledata mar_t20">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="name" label="页面名称"></el-table-column>
        <el-table-column prop="page" label="页面类型">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.page=='1'"><el-tag effect="dark" size="mini">门店首页</el-tag></div>
              <div v-if="scope.row.page=='2'"><el-tag effect="dark"  type="success" size="mini">个人中心</el-tag></div>
              <div v-if="scope.row.page=='3'"><el-tag effect="dark"  type="warning" size="mini">自定义页面</el-tag></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="changeAt" label="修改时间"></el-table-column>
        <el-table-column prop="display" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleEditClick(scope.row)">装修</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.size" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
  </div>
</template>
<script>
import Edit from './components/listedit';
import index from '../../api/index';
import { getDragList, changeDrag, dragDel } from '@/api/renovation';

export default {
  components: { Edit },
  created() {
    this.fetchData();
  },
  data() {
    return {
      list: [],
      // listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      activeName: '1',
      formInline: {
        name: '',
        display: '',
        page_type: '1',
        id: '22'
      },
      options: [
        {
          label: '全部',
          value: '1'
        },
        {
          label: '应用中',
          value: '2'
        },
        {
          label: '未应用',
          value: '3'
        }
      ]
    };
  },
  methods: {
    handleClick() {
      this.fetchData();
      if (this.activeName == '2') {
        this.$router.push(`/templatemall`);
        // let backendPath = index.backendPath
        // this.$router.replace({name: '/detail', params: {id: '2'}})
      }
    },
    handleEditClick(row) {
      const publishUrl = 'https://bkycms.com/addons/yb_wm/views/common/drag/index.html';
      const backendPath = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + 'views/common/drag/index.html'; //如果是本地拿isDev域名
      // console.log(location.href.match(/(\S*)views/)[1])
      // console.log('https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/'.match(/(\S*)views/)[1],index.isDev)
      window.open(backendPath + '?page=' + row.page + '&id=' + row.id + '&name=' + row.name, '_blank');
    },
    onSearch() {
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      var params = {
        page: this.page.currentPage,
        name: this.formInline.name,
        display: this.formInline.display
      };
      const { data, count } = await getDragList(params);
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs['edit'].showEdit(row);
      } else {
        this.$refs['edit'].showEdit();
      }
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await dragDel({ id: row.id });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await dragDel({ id });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    async changeSwitch(row) {
      const { msg } = await changeDrag({ id: row.id, display: row.display });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    }
  }
};
</script>
<style lang="scss" scoped>
.zximg {
  width: 120px;
  height: 160px;
}

.codeImg {
  width: 100px;
  height: 100px;
}

.disMode {
  box-shadow: 0px 1px 4px rgba(133, 148, 162, 0.2);
}
.sy{
  background: #00b7ee;
}
.grzx{
  background: #00b7ee;
}
.zdyym{
  background: #00b7ee;
}
</style>
